<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-title no-user-select">
        <svg-icon icon-class="logo" class="icon login-logo" />
        梧州气象精细化暴雨决策服务平台
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        autocomplete="on"
        label-position="left"
      >
        <!--登录-->
        <div class="title-container no-user-select">
          <h3 class="title">登 录</h3>
        </div>
        <!--账号-->
        <el-form-item class="inp-wrapper" prop="username">
          <el-input
            ref="username"
            v-model.trim="loginForm.username"
            placeholder="请输入用户名"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
            class="input-wrapper username"
          >
            <svg-icon slot="prefix" icon-class="loginUser" class="login-icon" />
          </el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item class="inp-wrapper" prop="password">
          <el-input
            ref="password"
            v-model.trim="loginForm.password"
            placeholder="请输入密码"
            name="password"
            type="password"
            tabindex="2"
            autocomplete="on"
            class="input-wrapper pwd"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          >
            <svg-icon slot="prefix" icon-class="clock" class="login-icon" />
          </el-input>
        </el-form-item>
        <!--记住密码-->
        <div class="check—box no-user-select" @click="checkValue">
          <span class="check-border" :class="rememberPwd ? 'check' : 'checked'">
            <i class="el-icon-check check-icon" v-show="rememberPwd"></i>
          </span>
          <span class="check-txt">记住密码</span>
        </div>
        <!--登录按钮-->
        <el-button class="login-btn" @click.native.prevent="handleLogin">
          登 录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      urls: {
        userInfo: '/api/UserInfoAction/getUserInfoById',
      },
      rememberPwd: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: ['blur', 'change'], message: '请输入用户名',/* message: '账号为数字或者字母，请重新输入...',  pattern: /[0-9a-zA-Z]\w{1,15}$/ */ }],
        password: [{ required: true, trigger: ['blur', 'change'], message: '请输入密码' }]
      },
      capsTooltip: false,
      loading: null,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    },
    // username:function(){
    //   this.loginForm.username=this.loginForm.username.replace(/[\W]/g,'')
    // }
  },
  created() {
    this.enterLogin();
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus();
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus();
    }
  },
  destroyed() {
    document.onkeydown = null;
  },
  methods: {
    // enter登录
    enterLogin() {
      const that = this;
      document.onkeydown = e => {
        let key;
        if (window.event === undefined) {
          key = e.keyCode;
        } else {
          key = window.event.keyCode;
        }
        // enter的ASCII码是13
        if (key === 13) {
          that.handleLogin();
        }
      };
    },
    // 初始化用户名和密码
    init() {
      // 在页面加载时从cookie获取登录信息
      const username = this.getCookie('username');
      const password = this.getCookie('password');
      const rememberPwd = Boolean(this.getCookie('rememberPwd'));
      // 如果存在赋值给表单，并且将记住密码勾选
      if (username) {
        this.loginForm.username = username;
        this.loginForm.password = password;
        this.rememberPwd = rememberPwd;
      }
    },
    /* 记住密码*/
    checkValue() {
      this.rememberPwd = !this.rememberPwd;
    },
    // 控制键盘输入
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    // 登录
    handleLogin() {
      let { username, password } = this.loginForm;
      password = this.$md5(password);
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$store.dispatch('user/login', { username, password }).then(res => {
            this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            console.log('this.redirect', this.redirect);
            this.setUserInfo();

            this.loading.close();
          }).catch((err) => {
            /* 捕获错误*/
            this.loading.close();
          })
        } else {
          return false
        }
      })
    },
    // cookie存储用户信息
    setUserInfo() {
      if (this.rememberPwd) {
        this.setCookie('username', this.loginForm.username, 7);
        this.setCookie('password', this.loginForm.password, 7);
        this.setCookie('rememberPwd', this.rememberPwd, 7);
      } else {
        this.setCookie('username', '');
        this.setCookie('password', '');
        this.setCookie('rememberPwd', this.rememberPwd);
      }
    },
    // 设置cookie
    setCookie(cName, value, expiredays) {
      let exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      const expires = (expiredays === undefined) ? '' : ';expires=' + exdate.toGMTString();
      document.cookie = `${cName}=${decodeURIComponent(value)}${expires}`;
    },
    // 获取cookie
    getCookie(key) {
      if (document.cookie.length > 0) {
        let start = document.cookie.indexOf(key + '=');
        if (start !== -1) {
          start = start + key.length + 1;
          let end = document.cookie.indexOf(';', start);
          if (end === -1) end = document.cookie.length;
          return unescape(document.cookie.substring(start, end));
        }
      }
      return '';
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>
<style lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  background-image: url("./images/loginBg.png");
  background-repeat: no-repeat;
  background-size: right;
  .login-wrapper {
    height: 100%;
    width: 900px;
    // width: 40%;
    padding: 100px 0 120px 180px;
    // background-color: #fff;
    .login-title {
      font-weight: 600;
      font-size: 36px;
      background-image: -webkit-linear-gradient(top, #3acae3, #3487fe);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      .login-logo {
        width: 90px;
        height: 90px;
        // border: 1px solid #2280fc;
        // border: 1px solid #1968B2;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }
  .login-form {
    padding-top: 16vh;
    width: 60%;
    color: #666666;
    .title {
      margin: 0;
      height: 2.4em;
      line-height: 2.4em;
      font-size: 24px;
      font-family: "SourceHanSansCN";
      font-weight: normal;
      color: rgb(54, 161, 244);
    }
    .inp-wrapper {
      margin-top: 2.8em;
      .input-wrapper {
        width: 100%;
      }
      .login-icon {
        width: 1em;
        height: 100%;
      }
      .el-input__prefix {
        left: 6px;
        font-size: 18px;
      }
      .el-input__inner:focus + .el-input__prefix {
        color: rgba(51, 134, 254, 0.6);
      }
    }
    .check—box {
      display: inline-block;
      color: #676767;
      cursor: pointer;
      .check-border {
        display: inline-block;
        margin-right: 4px;
        width: 16px;
        height: 16px;
        border: 1px solid #676767;
        border-radius: 2px;
        vertical-align: middle;
        .check-icon {
          margin-left: -2px;
          color: #3386fe;
          font-size: 22px;
          line-height: 14px;
          font-weight: bolder;
        }
        .check-txt {
          vertical-align: middle;
        }
      }
      .svg-icon {
        vertical-align: middle;
        cursor: pointer;
      }
    }
    .login-btn {
      padding: 0;
      margin-top: 2em;
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      color: #fff;
      border: none;
      background: linear-gradient(90deg, #2fc9e5, #3386fe);
      box-shadow: 1px 1px 5px 0px #999;
      transition: all 0.3s;
      &:hover {
        border: none;
        background: linear-gradient(270deg, #2fc9e5, #3386fe);
      }
      &:active {
        border: none;
        box-shadow: none;
        // background: url("./images/loginBtn2.png") no-repeat;
      }
    }
  }
  .el-input--medium {
    display: inline-block;
    width: 65%;

    .el-input__inner {
      height: 56px;
      line-height: 56px;
      border-color: #999 !important;
      border-radius: 2px !important;
      color: #666 !important;
    }
  }
}
</style>
<style lang="scss" scoped>
// $dark_gray: #889aa4;
// $light_gray: #eee;
// $loginWidth: 580px;
// $lfWidth: 220px;

// .login-container {
//   height: 100%;
//   width: 100%;
//   background: url("./images/loginBg.png") no-repeat 100% 100%;
//   color: #666;
//   overflow: hidden;

//   .login-wrapper {
//     width: $loginWidth;
//     height: 354px;
//     margin: 0 auto;
//     position: relative;
//     top: 50%;
//     transform: translateY(-80%);

//     .login-left {
//       width: $lfWidth;
//       height: 100%;
//       float: left;
//     }

//     .login-right {
//       width: calc(100% - #{$lfWidth});
//       height: 100%;
//       float: right;
//       background: url("./images/loginRt.png") no-repeat;
//       background-size: contain;
//       overflow: hidden;

//       .login-form {
//         margin: 40px 50px;

//         .svg-container {
//           color: $dark_gray;
//           vertical-align: middle;
//           width: 30px;
//           display: inline-block;

//           .login-icon {
//             width: 24px;
//             height: 24px;
//           }
//         }

//         .title {
//           font-weight: 500;
//           color: #555;
//         }

//         .inp-wrapper {
//           position: relative;
//           border-bottom: 1px solid #ccc;
//           padding: 16px 0;
//           margin-bottom: 6px;

//           .inp-box {
//             display: inline-block;
//             width: 100%;
//             margin-left: 10px;
//             font-size: 14px;
//           }
//         }
//       }
//     }
//   }
// }
//
</style>
